
<template>
    <div>
        <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 日期范围 </el-col>
                        <el-col :span="16">
                            <el-date-picker v-model="order_data" @change="order_data_change" value-format="yyyy-MM-dd"
                                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center">产品 </el-col>
                        <el-col :span="16">
                            <el-select v-model="product_id" filterable clearable @change="get_producModel"
                                placeholder="请选择产品" style="width: 100%">
                                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center">型号 </el-col>
                        <el-col :span="16">
                            <el-select filterable clearable v-model="times_kehu.model_number_id" placeholder="请选择型号"
                                style="width: 100%">
                                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <el-button @click="search(0)" class="add_btn" icon="el-icon-search">查询</el-button>
                    <!-- <el-button @click="search(2)" class="add_btn">导出</el-button> -->
                </el-col>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 总订单数 </el-col>
                        <el-col :span="16">
                            <span class="color_ref">{{ order.order_num_total }}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 总金额 </el-col>
                        <el-col :span="16">
                            <span class="color_ref">{{ order.order_receivables_total }}</span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <el-table :data="dataList_kehu" v-loading="loading" stripe style="width: 100%" border>
            <el-table-column label="产品">
                <template slot-scope="scope">
                    沙发
                </template>
            </el-table-column>
            <el-table-column label="型号" prop="model_number">
            </el-table-column>
            <el-table-column label="订单数" prop="order_num">
            </el-table-column>
            <el-table-column label="订单金额" prop="order_receivables">
            </el-table-column>
        </el-table>
        <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div> -->
    </div>
</template>

<script>
import {
    getModelNumberTabel
} from "@/api/user";
import {
    getProductList,
    getModelNumberList,
} from "@/api/product/index";
export default {
    data() {
        return {
            dataList_kehu: [],
            order: {
                order_num_total: '',
                order_receivables_total: ''
            },
            loading: false,
            total: 0,
            pagination: {
                per_page: 10,
                page: 1,
            },
            order_data: '',
            product_id: '',
            productList: [],
            ModelNumberList: [],
            times_kehu: {
                start_time: '',
                end_time: '',
                model_number_id: '',
            }
        }
    },
    mounted() {
        this.get_ModelNumberTabel()
        this.getproduct()
    },
    methods: {
        // 指定查询
        search(type) {
            if (type == 0) {
                this.pagination.per_page = 10;
                this.pagination.page = 1;
            }
            getModelNumberTabel(this.times_kehu).then((res) => {
                if (res.code == 200) {
                    this.dataList_kehu = res.data.list
                    this.order.order_num_total = res.data.total.order_num_total
                    this.order.order_receivables_total = res.data.total.order_receivables_total
                    if (type == 2) {
                        if (res.data.data.length > 0) {
                            this.$message.success("正在导出订单列表");
                            this.exports_w();
                        }
                    }
                }
            });
        },
        //产品列表
        getproduct() {
            getProductList().then((res) => {
                if (res.code == 200) {
                    this.productList = res.data.data;
                }
            });
        },
        get_producModel(id) {
            getModelNumberList({
                product_id: id,
                field_list: "id,model_number",
                is_dropdown: 1,
                file: 1,
            }).then((res) => {
                if (res.code == 200) {
                    this.ModelNumberList = res.data.data;
                }
            });
        },
        order_data_change(val) {
            this.times_kehu.start_time = val[0];
            this.times_kehu.end_time = val[1];
        },
        get_ModelNumberTabel() {
            getModelNumberTabel({ ...this.pagination, ...this.times_kehu }).then(res => {
                if (res.code == 200) {
                    this.dataList_kehu = res.data.list
                    this.order.order_num_total = res.data.total.order_num_total
                    this.order.order_receivables_total = res.data.total.order_receivables_total
                    this.total = res.data.total.order_num_total
                    this.loading = false
                }
            })
        },
        handleCurrentChange_kehu(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.get_ModelNumberTabel();
        },
        prev() {
            this.pagination_kehu.page = this.pagination.page - 1;
            this.get_ModelNumberTabel();
        },
        next() {
            this.pagination_kehu.page = this.pagination.page + 1;
            this.get_ModelNumberTabel();
        },
    }
}

</script>
<style scoped>
.color_ref {
    font-size: 36px;
    color: #ed8319;
}
</style>